{include file="public/layout" /}
<body class="laytp-container">
<div class="layui-card" id="search-form">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote">一级菜单最多三个，二级菜单最多五个</blockquote>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="tree_tabledata" lay-filter="tree_tabledata"></table>
    </div>
</div>
<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="closeall()">
      全部展开/关闭
    </button>
    <button class="layui-btn layui-btn-sm" onclick="reload()">
      刷新
    </button>
    <button class="layui-btn layui-btn-sm" onclick="add()">
      新增
    </button>
  </div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
  </div>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <!--        <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>
<script>
  var tableIns
  var datawhere = {};
  var treeTable = '';
  layui.use(function(){
    treeTable = layui.treeTable;
    var layer = layui.layer;
    var dropdown = layui.dropdown;
    // 渲染
    tableIns = treeTable.render({
      elem: '#tree_tabledata',
      url: '{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
      tree: {
        view:{
          iconLeaf:'',
        },
      },
      height: 'full-35', // 最大高度减去其他容器已占有的高度差
      toolbar: '#TPL-treeTable-demo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      css: [ // 重设当前表格样式
        '.layui-table-tool-temp{padding-right: 145px;}'
      ].join(''),
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
        {field: 'name', title: '分类名称'},
        { fixed: "right", title: "操作", width: 190, align: "center", templet:function (d) {
            var html = '';
            html += '<a class="layui-btn layui-btn-xs" onclick="edit('+d.id+')">编辑</a>';
            html += '<a class="layui-btn layui-btn-xs" onclick="del('+d.id+')">删除</a>';
            return html;
          }}
      ]],
      page: true
    });
    // 表头工具栏工具事件
    treeTable.on("toolbar(tree_tabledata)", function (obj) {
      var config = obj.config;
      var tableId = config.id;
      var status = treeTable.checkStatus(tableId);
      // 获取选中行
      if (obj.event === "getChecked") {
        if(!status.data.length) return layer.msg('无选中数据');
        console.log(status);
        layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
      }
    });
  });
  function edit(id){
    layer.open({
      title: '添加',
      type: 2,
      shadeClose: true,
      area: ['100%','100%'],
      scrollbar:false,
      content: '{:url("edit")}/id/'+id
    });
  }
  function add(id){
    layer.open({
      title: '添加',
      type: 2,
      shadeClose: true,
      area: ['100%','100%'],
      scrollbar:false,
      content: '{:url("edit")}/pid/'+id
    });
  }
  function del(id){
    if(id){
      var ids = [id];
    }else{
      var checkStatus = layui.table.checkStatus('test');
      var data = checkStatus.data;
      var ids = [];
      $.each(data, function(index, value){
        //goods_ids.append(value.goods_id);
        ids.push(value.user_id);
      });
    }
    layer.confirm('确定要删除选择的数据'+ids+'吗？', function(index){
      $.ajax({
        type: "POST",
        url: "{:url('del')}",
        data: {ids:ids},
        success: function(res){
          console.log(res);
          if(res.status){
            layer.msg('提交成功');
          }else{
            layer.msg(res.msg);
          }
          layer.close(index);
          tableIns.reload()
        }
      });
      layer.close(index);
      // 向服务端发送删除指令
    });

  }
  var flag = true
  function closeall(){
    if(flag){
      treeTable.expandAll('tree_tabledata', true); // 关闭全部节点
      flag = false;
    }else{
      treeTable.expandAll('tree_tabledata', false); // 关闭全部节点
      flag = true;
    }
  }
  function reload(){
    treeTable.reload('tree_tabledata')
  }
</script>
</body>
</html>